<template>
  <div class="middle">
    <div id="reportmidEcharts5"></div>
  </div>
</template>

<script>
export default {
  name: 'reportmidEcharts5',
  props: {
    tuVos3: {
      type: [Object, Array]
    }
  },
  data() {
    return {
    };
  },
  created() {
  },
  mounted() {
    this.reportmidEcharts();
  },
  watch: {
    tuVos3: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue);
        // console.log('numbers正在被侦听');
        this.reportmidEcharts();
      }
      // deep: true,
      // immediate: true
    }
  },
  methods: {
    // 深拷贝
    deepCopy(obj) {
      var tempTool = Array.isArray(obj) ? [] : {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          tempTool[key] = typeof obj[key] === 'object'
            ? this.deepCopy(obj[key])
            : Array.isArray(obj) ? Array.prototype.concat(obj[key]) : obj[key];
        }
      }
      return tempTool;
    },
    // 图表数据
    reportmidEcharts() {
      let option = this.deepCopy(this.tuVos3);
      // console.log(option);
      let midChart = this.$echarts.init(document.getElementById('reportmidEcharts5'));
      midChart.setOption({
        radar: {
          // radius: 68, // 雷达图半径
          axisName: {
            color: '#555'
          },
          // shape: 'circle',
          name: {
            show: true,
            textStyle: {
              color: '#333'
            }
          },
          // indicator: [
          //   { name: '学习能力', max: 500 },
          //   { name: '协作能力', max: 500 },
          //   { name: '管理能力', max: 500 },
          //   { name: '执行能力', max: 500 },
          //   { name: '代码规范', max: 500 },
          //   { name: '协作能力', max: 500 }
          // ],
          indicator: option.map(function (item) {
            item.name = item.evaluationDetailItemName;
            item.max = 500;
            return item;
          }),
          splitArea: {
            areaStyle: {
              color: ['#fff'],
              shadowColor: 'rgba(0, 0, 0, 0.2)'
            }
          },
          splitLine: {
            lineStyle: {
              color: ['#D5DEFD', '#D5DEFD', '#D5DEFD']
            }
          }
        },
        tooltip: {
          textStyle: {
            align: 'left' // 左对齐
          },
          position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = {top: 60};
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
          }
        },
        series: [
          {
            name: '知识能力',
            type: 'radar',
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: '#8C5FDD'
              }
            },
            data: [
              {
                // value: [42, 30, 200, 350, 500, 180],
                value: option.map(function (item) {
                  return item.sum;
                }),
                name: '个人成绩',
                itemStyle: {
                  normal: {
                    color: '#2FC0E0',
                    lineStyle: {
                      color: '#2FC0E0'
                    }
                  }
                },
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value;
                  }
                },
                areaStyle: {
                  color: '#E8F4F9'
                }
              },
              {
                // value: [50, 140, 280, 260, 420, 210],
                value: option.map(function (item) {
                  return item.classAvg;
                }),
                name: '班级平均',
                itemStyle: {
                  normal: {
                    color: '#8C5FDD',
                    lineStyle: {
                      color: '#8C5FDD'
                    }
                  }
                },
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value;
                  }
                },
                areaStyle: {
                  color: '#E8DFF8'
                }
              }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.middle {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  #reportmidEcharts5 {
    width: 100%;
    height: 100%;
  }
}
</style>
